<template>
  <div
    class="echart1"
    id="mychart1"
    :style="myChartStyle"
    style="position: absolute; top: 340px; left: 1140px; width: 500px; height: 500px"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChartStyle: { float: "center", width: "300px", height: "150px" }, //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            // roseType: "angle",
            minAngle: 2, // 最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            alignTo: "edge",
            margin: 0,
            label: {
              normal: {
                // formatter: "{b|{b}}\n{c}\n{per|{d}%}  ",
                overflow: "none",
                rich: {
                  b: {
                    fontSize: 8,
                    height: 80,
                    width: 200,
                    lineHeight: 40,
                    align: "center", // 设置文字居中
                  },
                  per: {
                    color: "#eee",
                    backgroundColor: "#334455",
                    padding: [2, 4],
                    borderRadius: 2,
                    align: "center",
                    overflow: "none",
                  },
                },
              },
            },
            data: [
              { value: 600, name: "养心菜" },
              { value: 100, name: "人参叶" },
              { value: 400, name: "富贵菜" },
              { value: 400, name: "紫背天葵" },
              { value: 200, name: "田七叶" },
              { value: 100, name: "冰菜" },
              { value: 100, name: "紫苏" },
              { value: 100, name: "其他" },
            ],
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart1"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
